<template>
    啊实打实的
<a-modal :visible="state.visible" title="修改密码" @cancel="handleCancel" @ok="handleOk" :width="540">
    <a-form ref="formRef" :model="state.formData" :labelCol="{style:'width:100px'}">
        <a-form-item label="旧密码" name="password" :rules="[{required:true,message:'必填'}]">
            <a-input-password style="width: 400px;" v-model:value="state.formData.password" :maxLength="20"></a-input-password>
        </a-form-item>
        <a-form-item label="新密码" name="newPassword" :rules="[{required:true,message:'必填'}]">
            <a-input-password style="width: 400px;" v-model:value="state.formData.newPassword"></a-input-password>
        </a-form-item>
        <a-form-item label="重输新密码" name="rwPassword" :rules="[{required:true,message:'必填'}]">
            <a-input-password style="width: 400px;" v-model:value="state.formData.rwPassword"></a-input-password>
        </a-form-item>
    </a-form>
  </a-modal>  
</template>
<script lang="ts" setup>
import { UserService } from "@/service";
import { message } from "ant-design-vue";
import { ref,reactive } from "vue";

const state = reactive({
    formData:{
        password:"",
        newPassword:"",
        rwPassword:""
    },
    visible:true
})

const formRef = ref();

const emit = defineEmits<{
   (e:"ok"):void,
   (e:"cancel"):void
}>()


const handleCancel = ()=>{
   emit("cancel")
}

const handleOk=()=>{
    formRef.value.validateFields().then(async(valid:boolean)=>{
       if(valid){
        if(state.formData.newPassword!=state.formData.rwPassword){
            return message.error("两次密码输入不相同")
        }
        let res = await UserService.resetPassword(state.formData);
        if(res.code==0){
            emit("cancel")
            message.success("操作成功")
        }
       }
    })
   
}

</script>